<template>
  <sn-row-has-four-col
      :one="4"
      :two="5"
      :three="8"
      :four="4"
      class="top-info">
    <div slot="one-col" style="min-height: 36px"></div>
    <!-- 影院海报-->
    <el-image
        class="poster"
        slot="two-col"
        :src="cinemaInfo.poster"/>
    <!-- 基本信息-->
    <div slot="three-col" class="cinema-description ">
      <!-- 影院名称-->
      <sn-text
          class="margin-bottom"
          :font-size="25"
          :text="cinemaInfo.cinemaName"/>
      <!-- 地址 -->
      <sn-text
          class="margin-bottom"
          :font-size="14"
          :text="'地址 : ' + cinemaInfo.address"/>
      <!-- 影院联系电话-->
      <sn-text
          :font-size="14"
          class="margin-bottom"
          :text="'电话 : ' + cinemaInfo.telephone"/>
      <div class="to-flex margin-bottom">
        <sn-text
            :font-size="14"
            text="影院服务"/>
        <span class="line"></span>
      </div>

      <!-- 影院服务 -->
      <div>
        <sn-row-has-two-col
            :left="5"
            :right="19"
            v-for="item of cinemaInfo.service"
            class="margin-top">
          <el-tag
              slot="one-col"
              style="width: 80px;text-align: center;height: 30px"
              type="danger">
            {{ item.name }}
          </el-tag>
          <span slot="two-col" class="service-description">
            {{ item.description }}
          </span>
        </sn-row-has-two-col>
      </div>
    </div>
  </sn-row-has-four-col>
</template>

<script>
export default {
  name: "CinemaTopInfo",
  data() {
    return {
      wantSeeIcon: require('@/assets/image/movie/wantSee.png'),
      notWantSeeIcon: require('@/assets/image/movie/notWantSee.png'),
      scoreIcon: require('@/assets/image/movie/score.png'),
      notScoreIcon: require('@/assets/image/movie/notScore.png'),
    }
  },
  props: {
    cinemaInfo: Object
  },
}
</script>

<style scoped lang="less">
.top-info {
  height: 400px;
  background-color: #756189;
}

.poster {
  height: 300px;
  width: 350px;
  border: 4px solid #fff;
  position: relative;
  top: 70px;
}

.cinema-description {
  margin-top: 40px;
  margin-left: 50px;
  color: #fff;
}

.line {
  width: 400px;
  height: 0.1px;
  background-color: #C0B7C3;
  border: solid #C0B7C3 1px;
  position: relative;
  left: 15px;
  top: 8px;
}

.service-description {
  position: relative;
  top: 5px;
  font-size: 14px;
}
</style>